<template>
  <table class="table" data-op-type="table">
    <thead>
      <th v-for="(th, ti) in column" :key="'th' + ti">{{ th.label }}</th>
    </thead>
    <tbody>
      <tr v-for="(tr, tri) in data" :key="'tr' + tri">
        <td v-for="(td, tdi) in column" :key="`${tri}-${tdi}`">
          <div class="cell-text">{{ tr[td.prop] }}</div>
        </td>
      </tr>
    </tbody>
  </table>
</template>
<script lang='ts' setup name='SimpleTable'>
import { ref } from 'vue'

interface TableColumn {
  label: string,
  prop: string
}

interface TableRow<T> {
  [key: string]: T
}
defineProps<{
  column: TableColumn[],
  data: TableRow<any>[]
}>()
</script>
<style lang='scss'>
$border :1px solid #111;

.table {
  border: $border;
  border-spacing: 0;
  box-sizing: border-box;
  border-collapse: collapse;

  th,
  td {
    box-sizing: border-box;
    border: $border;
    padding: 4px 8px;
  }
}
</style>